<!DOCTYPE html>
<html>
<head>
    <title>Flat Admin V.2 - Free Bootstrap Admin Templates</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <frame-options policy="SAMEORIGIN" />
    <#scripts />
</head>

<body class="flat-blue">
	<div class="row content" id="main">
       <div class="col-xs-12 content">
           <div class="card">
               <div class="card-header">
                   <div class="card-title">
                       <div class="title">请填写菜单基本信息</div>
                   </div>
               </div>
               <div class="card-body">
                   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					  <el-form-item label="菜单名称" prop="name">
					    <el-input v-model="ruleForm.name"></el-input>
					  </el-form-item>
					  <el-form-item label="菜单编号" prop="code">
					    <el-input v-model="ruleForm.code"></el-input>
					  </el-form-item>
					  <el-form-item label="父级菜单" prop="pname">
					  	<el-col :span="20">
					    	<el-input v-model="ruleForm.pname" readonly></el-input>
					    </el-col>
					    <el-col :span="3">
					    	<el-button icon="el-icon-search" circle style="margin-left:5px;" @click="selectParentMenu"></el-button>
					    </el-col>
					  </el-form-item>
					  <el-form-item label="图标" prop="icon">
					    <el-input v-model="ruleForm.icon"></el-input>
					  </el-form-item>
					  <el-form-item label="链接" prop="url">
					    <el-input v-model="ruleForm.url"></el-input>
					  </el-form-item>
					  <el-form-item label="是否为菜单" prop="ismenu">
					    <el-switch v-model="ruleForm.ismenu"></el-switch>
					  </el-form-item>
					  <el-form-item label="排序" prop="sort">
					    <el-input-number v-model="ruleForm.sort" :min="0" :max="9999" ></el-input-number>
					  </el-form-item>
					  <el-form-item label="备注" prop="tips">
					    <el-input v-model="ruleForm.tips"></el-input>
					  </el-form-item>
					  <el-form-item>
					    <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
					    <el-button @click="resetForm('ruleForm')">重置</el-button>
					    <el-button @click="cancel" type="danger">取消</el-button>
					  </el-form-item>
					</el-form>
               </div>
           </div>
       </div>
   </div>
   <script type="text/javascript">
   var vm = new Vue({
	    el: '#main',
	    data: {
	    	ruleForm: {
	    		name:"",
	    		code:"",
	    		pid:"",
	    		icon:"",
	    		url:"",
	    		sort:0,
	    		ismenu:true,
	    		tips:"",
	    		pname:""
	        },
	        rules: {
	            name: [
	              { required: true, message: '请输入菜单名称', trigger: 'blur' },
	              { max: 5, message: '长度在不能超过 5 个字符', trigger: 'blur' }
	            ],
	            code: [
		          { required: true, message: '请输入菜单编号', trigger: 'blur' },
	              { 
		        	validator: function(rule, value, callback){
		        		var params = new URLSearchParams();
		        		params.append('code', value);
		        		axios.post('/menu/checkcode', params).then(function (response) {
		    	        	var data = response.data;
	    	            	if(data.code!=200){
	    	            		callback(new Error('菜单编号已存在'));
	    	            	}else{
	    	            		callback();
	    	            	}
		    	        }).catch(function (error) {
		    	        	callback(new Error(error));
		    	       	});
	              	  }, trigger: 'blur' 
	              }
	            ],
	            pname: [
		          { required: true, message: '请选择父级菜单', trigger: 'blur' }
		        ],
		        url: [
		              { required: true, message: '请选择父级菜单', trigger: 'blur' }
		        ]
	        }
	    },
	    methods: {
	    	submitForm(formName) {
	        	this.$refs[formName].validate((valid) => {
	            	if (valid) {
	            		axios.post('/menu/add', vm.getParams()).then(function (response) {
	    	            	var data = response.data;
	    	            	if(data.code==200){
	    	            		parent.vm.onload();
	     	            		parent.layer.closeAll();
	    	            	}
	    	        	}).catch(function (error) {
	    	                layer.msg(error);
	    	       		});
	              	} else {
	                	return false;
	              	}
	        	});
	        },
          	resetForm(formName) {
            	this.$refs[formName].resetFields();
          	},
	    	selectParentMenu(){
	    		layer.open({
	    			  type: 2,
	    			  title: '选择父级菜单',
	    			  shadeClose: true,
	    			  shade: 0.8,
	    			  area: ['300px', '400px'],
	    			  content: '${ctxPath}/menu/tree' //iframe的url
	    			}); 
	    	},
	    	cancel:function(){
	    		parent.layer.closeAll();
	    	},
	        onload:function(){
	        	
	        },
	        selectParentCallback:function(parent){
	        	vm.ruleForm.pname = parent.name;
	        	vm.ruleForm.pid = parent.id;
	        	this.$refs['ruleForm'].validateField("pname");
	        },
	        getParams:function(){
	        	var params = new URLSearchParams();
	        	params.append('name', vm.ruleForm.name);
	        	params.append('code', vm.ruleForm.code);
	        	params.append('pid', vm.ruleForm.pid);
	        	params.append('icon', vm.ruleForm.icon);
	        	params.append('url', vm.ruleForm.url);
	        	params.append('sort', vm.ruleForm.sort);
	        	params.append('ismenu', vm.ruleForm.ismenu?1:0);
	        	params.append('tips', vm.ruleForm.tips);
	        	return params;
	        }
	    }
	});
	vm.onload();
   </script>
</body>

</html>
